<template>
  <layout title="">
    <section class="public-detail" id="public-detail">
      <h1 class="title">{{currentProject.task_nam}}公示</h1>
      <p class="sub-title">（公示对象所属行政区：{{currentPub.s_a_nam_all}}）</p>
      <PublicStates v-bind="$props" />
    </section>
    <br>
    <!-- 人员列表 -->
    <PublicMemberList v-bind="$props" />
  </layout>
</template>

<script lang="ts">
import { Mixins, Component, Watch, Vue, Prop } from 'vue-property-decorator'
import EventsMixin from '@/mixin/events'
import { TableMixin, AuthMixin } from '@/mixin'

import { TableLayout } from '@/layouts'
import CustomForm from '@/components/src/Form'
import { publishServices, IPublish } from '@/common/services/publish'
import { PayUnitTypeMap, publishStatusMap } from '@/common/enum'
import { userModule } from '@/store/modules/user'
import PublicMemberList from './PublicMemberList.vue'
import PublicStates from './PublicStates.vue'

@Component({
  components: {
    Layout: TableLayout,
    CustomForm,
    PublicMemberList,
    PublicStates
  }
})
export default class AdminList extends Mixins(
  EventsMixin,
  TableMixin,
  AuthMixin
) {
  @Prop({
    type: String
  })
  public currentAreaId!: string
  @Prop({
    type: String
  })
  public currentPubId!: string
  @Prop({
    type: Object
  })
  public currentPub!: IPublish
  @Prop({
    type: String
  })
  public showArea!: string

  get currentProject () {
    return userModule.currentProject
  }

  get isLarge() {
    return userModule.isLarge
  }

  public commonParams = {
    s_a_id: ''
  }

  // 产品列表搜索条件
  public tableSearch = {
  }

  // 自定义mode
  public customMode = 'add'

  // 产品列表表格信息
  public columns: ITable.IColumn[] = [
    {
      title: this.isLarge ? '大户编号' : '农户编号',
      dataIndex: 'member_id',
      key: 'member_id',
      width: 120
    },
    {
      title: this.isLarge ? '大户名称' : '户主姓名',
      dataIndex: 'member_nam',
      key: 'member_nam',
      width: 120
    },
    {
      title: this.isLarge ? '种粮地址' : '家庭地址',
      key: 's_a_nam_all',
      dataIndex: 's_a_nam_all',
      width: 250,
    },
    {
      title: '确权面积',
      children: [
        {
          title: '合计',
          key: 'field',
          dataIndex: 'field',
          align: 'right',
          width: 120,
        },
        {
          title: '确权面积',
          key: 'field1',
          dataIndex: 'field1',
          align: 'right',
          width: 120,
        },
        {
          title: '增加面积',
          key: 'field2',
          dataIndex: 'field2',
          align: 'right',
          width: 120,
        },
        {
          title: '减少面积',
          key: 'field3',
          dataIndex: 'field3',
          align: 'right',
          width: 120,
        },
      ]
    },
    {
      title: '粮食种植面积（亩）',
      dataIndex: 'plant',
      key: 'plant',
      align: 'right',
      width: 160
    },
    {
      title: '补贴总金额（元）',
      dataIndex: 'pay_price_total',
      key: 'pay_price_total',
      align: 'right',
      width: 140
    },
    {
      title: '收款账户',
      dataIndex: 'bank_num',
      key: 'bank_num',
      width: 140
    }
  ]

  public tableApi = {
    list: publishServices.previewMembers
  }


  public mounted() {
  }

  public async getData() {
    const res = await this.getTableList()
  }

  // 获取当前公示状态
  public getCurrentPubStatus(row: IPublish) {
    // 三级公示
    if (+row.pub_ck_state3) {
      return "第三次" + publishStatusMap.get(row.pub_ck_state3)
    }
    // 二级公示
    if (+row.pub_ck_state2) {
      return "第二次" + publishStatusMap.get(row.pub_ck_state2)
    }
    // 一级公示
    if (+row.pub_ck_state1) {
      return"第一次" +  publishStatusMap.get(row.pub_ck_state1)
    }
  }

  // 获取最初和最后公示时间
  public getCurrentTimeArea(row: IPublish) {
    const newest = row.pub_ck_state1 || row.pub_ck_state2 || row.pub_ck_state3
    return {
      firstTime: row.pub_ck_start1,
      endTime: row.pub_ck_end3 || row.pub_ck_end2 || row.pub_ck_end1
    }
  }
}
</script>

<style scoped lang="less">
.title, .sub-title {
  text-align: center;
}

/deep/ .ant-card-body {
  padding: 0!important;
}
  
@media print {
  @page {
    size: landscape;   /* auto is the initial value */
    margin: 0;  /* this affects the margin in the printer settings */
  }
  #public-detail {
    width: 1123px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
  }
  
  .title {
    margin: 20px auto;
  }
  /deep/ .print-public {
    display: none;
  }
  /deep/ .ant-table-fixed-columns-in-body {
    display: none;
  }
  /deep/ .ant-table-fixed-right {
    display: none;
  }
  /deep/ .ant-table-body {
    overflow: hidden!important;
  }
}
</style>
